<template>
  <div class="costDetails">
    <div class="container pt-4">
      <div class="row">
        <div class="col-12">
          <div class="pointsRule">
            <ul id="list">
              <li style="z-index:6;background-image: linear-gradient(to right, #005bea ,#00c6fb)" class="green" @click="gotoHome()"><a><span>首页</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:5;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="gotoNav()"><a><em class="before"></em><span>预算管理</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:4;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="gotoCost()"><a><em class="before"></em><span>收入</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:3;background-color: #ffc107;"><a><em class="before"></em><span style="color: #4e555b;">{{project}}</span><i style="background-color:#ffc107;"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="mt-4">
        <table class="table table-striped">
          <tbody>
            <tr>
              <th>项目</th>
              <th>目标</th>
              <th>预测</th>
              <th>实际</th>
              <th>当月</th>
            </tr>
            <tr>
              <td>总计</td>
              <td>{{fixNum(targetAmount)}}</td>
              <td class="text-success">{{fixNum(predictAmount)}}</td>
              <td>{{fixNum(sumAmount)}}</td>
              <td>{{fixNum(nowMonthAmount)}}</td>
            </tr>
            <tr v-for="item in detailList" @click="getDetailMonth(item.id, item.project)">
              <td>{{item.project}}</td>
              <td>{{fixNum(item.targetAmount)}}</td>
              <td>{{fixNum(item.sumAmount-item.nowMonthAmount + item.lastMonthAmount*month)}}</td>
              <td>{{fixNum(item.sumAmount)}}</td>
              <td>{{fixNum(item.nowMonthAmount)}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <el-dialog
        :title="detailProject"
        :visible.sync="dialogVisible"
        width="55%"
        :before-close="handleClose">
        <div class="managerCon2">
          <div class="container">
            <div class="row">
              <div class="col-12">
                <div class="content">
                  <ul class="pl-0 row ">
                    <li class="col-3" v-for="index in 12" v-if="info['month' +index + 'Amount'] !== null && info['month' +index + 'Amount'] != ''">
                      <div class="row justify-content-center">
                        <div class="title">{{index}}月</div>
                      </div>
                      <div class="num">
                        <div>实际值：<span >{{fixNum(info['month' +index + 'Amount'])}}万</span></div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-show="info === null">
          <div class="row justify-content-center">
            <img src="@/assets/img/noData.png" width="100px" class="mt-3"/>
          </div>
          <div class="row justify-content-center mt-4">暂时没有数据！</div>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    name: "profitDetails",
    data(){
      return{
        dialogVisible: false,
        loading: {},
        info: {},
        sumAmount: 0,
        nowMonthAmount: 0,
        targetAmount: 0,
        predictAmount: 0,
        detailList: [],
        project: '',
        type: 11,
        month: 12,
        detailMonthList: [],
        detailProject: '',
        lastMonthAmount: 0,
        orgid: window.sessionStorage.getItem('orgid')
      }
    },
    created() {
      this.month = 12 - new Date().getMonth()
      this.project = window.sessionStorage.getItem('project')
      this.type = window.sessionStorage.getItem('proType')
      this.getCostDetail()
    },
    methods:{
      //跳转到首页
      gotoHome: function(){
        this.$router.push("/index")
        this.isActive=0
      },
      //跳转到书吧
      gotoNav: function(){
        this.$router.push("/nav2");
      },
      //跳转到费用
      gotoCost: function(){
        this.$router.push("/profit");
      },
      handleClose () {
        this.dialogVisible  = false
      },
      getDetailMonth(id, project){
        // window.sessionStorage.setItem('typeId',id)
        // console.log(project)
        // this.$router.push('/monthlyDetails')
        // this.loading = this.$loading({
        //   lock: true,//lock的修改符--默认是false
        //   text: 'Loading',//显示在加载图标下方的加载文案
        //   spinner: 'el-icon-loading',//自定义加载图标类名
        //   background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色
        //   target: document.querySelector('#table')//loadin覆盖的dom元素节点
        // });
        this.dialogVisible=true
        this.detailProject = project
        this.$http.get(
          '/api/getActualMonth',
          {
            params: {
              id: id
            }
          }).then(res => {
          this.dialogVisible=true
          this.info = res.data
        })
      },
      getCostDetail () {
        // this.loading = this.$loading({
        //   lock: true,//lock的修改符--默认是false
        //   text: 'Loading',//显示在加载图标下方的加载文案
        //   spinner: 'el-icon-loading',//自定义加载图标类名
        //   background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色
        //   target: document.querySelector('#table')//loadin覆盖的dom元素节点
        // });
        this.$http.get(
          '/api/getAllCost',
          {
            params: {
              type: this.type
            }
          }).then(res => {
          this.sumAmount = res.data.sumAmount
          this.nowMonthAmount = res.data.nowMonthAmount
          this.targetAmount = res.data.targetAmount
          this.lastMonthAmount = res.data.lastMonthAmount
          this.predictAmount = this.sumAmount - this.nowMonthAmount + (this.lastMonthAmount * this.month)
          this.detailList = res.data.list
          // this.loading.close()
        })
      },
      fixNum (num) {
        return (num/10000).toFixed(2)
        // return num
      },
    },

  }
</script>

<style>

  .costDetails{
    height: 220%;
    background: white;
  }
  .costDetails  table{
    margin-bottom: 0;
  }
  .costDetails table tr td,
  .costDetails table tr th{
    text-align: center !important;
    cursor: pointer;
  }


  .costDetails .managerCon2 h2{
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 3px;
  }
  .costDetails .managerCon2 .content ul li{
    list-style: none;
    text-align: center;
    padding: 0 15px;
  }
  .costDetails .managerCon2 .content ul li .title{
    z-index: 999;
    background: white;
    font-size: 18px;
    color: #95999c;
    position: relative;
    top: 17px;
    padding: 0 10px;
  }
  .costDetails .managerCon2 .content ul li .num{
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: bold;
    border: 3px solid #7abaff;
    border-radius: 10px;
    padding: 15px 10px;
  }
  .el-dialog__body{
    padding: 0 30px 50px 30px;
  }

</style>
